<template>
	<div class="msgDetail">
		<div  v-for="items in data_ti" :key="items.id" class="detail_item" @click="goProcessin(items.children,items.info_types,items.promoter,items.info_time)">
			<div class="detaLeft">
				<img src="../../static/tixk/xnxitixk/msg.png" alt="" class="img" />
				<img src="../../static/tixk/xnxitixk/shijian.png" alt="" class="img" />
			</div>
			<div class="detaCon">
				<p class="p">{{items.promoter}}发起了一个《{{items.information}}》指定由您处理</p>
				<p class="p1">{{items.info_time}}</p>
			</div>
			<div class="detaRight">
				<span class="hs1"></span>
			</div>
		</div>
		<div  v-for="items in data_wu" :key="items.id" class="detail_item" @click="goProcessin(items.children,items.info_types,items.promoter,items.info_time)">
			<div class="detaLeft">
				<img src="../../static/tixk/xnxitixk/msg.png" alt="" class="img" />
				<img src="../../static/tixk/xnxitixk/shijian.png" alt="" class="img" />
			</div>
			<div class="detaCon">
				<p class="p">{{items.promoter}}发起了一个《{{items.information}}》指定由您处理</p>
				<p class="p1">{{items.info_time}}</p>
			</div>
			<div class="detaRight">
				<span class="hs"></span>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		onLoad(option) {
			const {detail} = option
		  // console.log(detail)
		  const res = JSON.parse(detail)
		  console.log(res.children)
		  res.children.forEach(item=>{
			  if(item.info_types === 'male'){
				  this.data_ti.push(item)
			  }else{
				  this.data_wu.push(item)
			  }
		  })
		  
		  console.log('我是ti',this.data_ti)
		  console.log('我是wu',this.data_wu)
		},
		 data() {
		    return {
		      data_ti:[]  ,// 初始计数值为0
		      data_wu:[]  ,// 初始计数值为0
			  
		    };
		},
		methods:{
			goProcessin(val,type,author,time){
				// console.log(val,'我是数据')
				// console.log(type,'我是类型')
				// console.log(author,'我是作者')
				// console.log(time,'我是时间')
				let obj = {
					information:val,
					type,
					author,
					time
				}
				uni.navigateTo({
					url:`/pages/message/crunch/crunch?detail=${JSON.stringify(obj)}`
				})
			}
			
		}
	}
</script>

<style scoped lang="scss">
	.msgDetail{
		width: 100%;
		height: 100%;
		background-color: #f9f9f9;
		box-sizing: border-box;
		padding: 40rpx 20rpx;
		font-size: 25rpx;
		.detail_item{
			background-color: white;
			display: flex;
			margin-bottom: 10px;
			// align-items: center;
			// padding: 60rpx 0rpx;
			height: 150rpx;
			// background-color: #ddd;
			box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
			padding: 0px 30rpx;
			
			.detaLeft{
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-evenly;
				margin-right: 20rpx;
			}
			.detaCon{
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				// align-items: center;
				.p1{
					color: #dbd0cc;
				}
			}
			.detaRight{
				flex: 1;
				text-align: right;
				padding-top: 40rpx;
				.hs1{
					background-color: red;
					width: 15rpx;
					height: 15rpx;
					display: inline-block;
					border-radius: 15rpx;
				}
			}
			.img{
				width: 30rpx;
				height: 30rpx;
			}
			
		}
	}

</style>